<template>
<div>
    <ul class="finallist">
        <li v-for="(vy, y) in list" :key="y" class="fcb animation" @click="viewDetail(vy.id)">
			<span v-for="(vx, x) in vy" :key="x"  v-if="x!='id'"  v-text="vx" :style="{width:100/(list.length - 1)+'%'}">2333</span>
		</li>
    </ul>
	<hb-dialogb v-if="tradeShow"  @clk="e_en_1()" :title="Lang.msgHead[lang][0]">
		<section class="ddd_dialog">
			<ol>
				<li>
					<span class="radioselect rcont">支付方式：</span>
					<span v-for="(pay ,i) in paylist" :key="i">
						<input type="radio" v-model="payMethod" :value="pay.label" :id="pay.name">  <label :for="pay.name" v-text="pay.name" class="radioselect"></label>
					</span>
				</li>
				<li>
					<input type="number" :placeholder="Lang.placeholderTxt[lang][0]"  v-model="count" class="rcont">
				</li>
				<li>
					<input :placeholder="Lang.placeholderTxt[lang][1]" type="password"  v-model="password" class="rcont">
				</li>
				<li>
					<button class="lastLi" @click="tradeClick()" v-text="Lang.button[lang][6]"></button>
				</li>
			</ol>
		</section>
	</hb-dialogb>

	<hb-dialogb v-if="adShow" @clk="e_en_2()" :title="Lang.msgHead[lang][1]">
		<section class="ddd_dialog">
			<ol>
			<li>
			<button class="button_action" @click="cancelAd()" v-text="Lang.button[lang][0]">取消广告</button>
			</li></ol>
		</section>
	</hb-dialogb>

	<hb-dialogb v-if="orderShow" @clk="e_en_3()" :title="Lang.msgHead[lang][2]">
		<section class="ddd_dialog">
			<ol>
			<li>
				<button class="button_action" @click="completeTran()" v-text="Lang.button[lang][1]">完成交易</button>
				<div v-show="complete">
					<input :placeholder="Lang.placeholderTxt[lang][1]" type="password"  v-model="password" class="rcont1">
					<button class="rfm" @click="completeTrans()" v-text="Lang.button[lang][6]">确定</button>
				</div>

			</li>
			<li>
				<button class="button_action" @click="lookInf()" v-text="Lang.button[lang][2]">查看信息</button>
				<p v-show="infShow" class="rcont"><span class='inf_name' v-text="Lang.inf[lang][0]">phone</span><span class="inf" v-text="phone"/></p>
				<!-- <p v-show="infShow" class="rcont"><span class='inf_name'>phone</span><span class="inf">asdasdasd</span></p> -->
			</li>
			<li>
				<button class="button_action" @click="orderComplaint()" v-text="Lang.button[lang][3]">订单申诉</button>
				<div v-show="isrankm">
					<input :placeholder="Lang.placeholderTxt[lang][2]" type="text"  v-model="rankm" class="rcont1">
					<button class="rfm" @click="orderComplaints()" v-text="Lang.button[lang][8]">申诉</button>
				</div>
			</li>
			<li>
				<button class="button_action" @click="uploadVoucher()" v-text="Lang.button[lang][9]">上传凭证</button>
				<div v-show="upload">
					<w-uploadImg @file_img='file_img' id="uploadImg"></w-uploadImg>
					<button class="button_action" @click="uploadVoucherSub()" v-text="Lang.button[lang][6]">申诉</button>
				</div>
			</li>
			<li>
				<button class="button_action" @click="XOrderComplaint()" v-text="Lang.button[lang][4]">取消申诉</button>
			</li>

			<li>
				<button class="button_action" @click="XOrder()" v-text="Lang.button[lang][5]">取消订单</button>
			</li>
			<!-- <li class="lastLi">
				<button @click="close1(dialogShow)">确定</button>
			</li> -->
		</ol>
	</section>
	</hb-dialogb>

	<section class="dialogDel" v-show="confirm">
		<div class="delqr">
			<p v-text="title"/>
			<button class="fl" @click="confirmClose" v-text="Lang.button[lang][7]">取消</button>
			<button class="fr" @click="confirmOk" v-text="Lang.button[lang][6]">确定</button>
		</div>

	</section>

	 <hb-dialog v-if="msg !== ''"
            @clk="e_en()">
            <span v-text="msg"/>
        </hb-dialog>
</div>
</template>

<script>
import Lang from './lang.js'
import {bus} from '../../../../main.js'
import {imgpost, vpost, vlink} from '@api'
export default {
	name: 'finallist',
	props: {
		list: {
			default: [],
		},
	},
	data() {
		return {
			payMethod:1,
			Lang,
			propSelectpage: 1, //选择的页码
			title: '', //提示确认操作的文字
			count: '', //数量
			password: '', //密码
			selectedId: '', //id
			rankm: '',
			dqAction: '',
			imgFile: null,

			detailMsg: 'wqeqweqewqeqwe',
			dialogShow: false,
			id: '',

			infShow: false, //交易对象的信息
			tarName: '',
			phone: '',

			tradeShow: false, // 交易
			adShow: false, //广告
			orderShow: false, //订单
			confirm: false,
			complete: false,
			isrankm: false,
			upload: false, //上传凭证
			paylist: [
				{label:'1',name:'银行卡'},
				{label:'2',name:'支付宝'},
				{label:'3',name:'微信'},
			]

			,
			msg: '',
		}
	},

	created() {
		bus.$on('selectedpage', text => {
			this.propSelectpage = text
		})
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	mounted() {},
	components: {},
	methods: {
		init(page) {
			if (page == 1) {
				this.tradeShow = true
			} else if (page == 2) {
				this.adShow = true
			} else if (page == 3) {
				this.infShow = false
				this.complete = false
				this.isrankm = false
				this.orderShow = true
			}
		},
		//点击信息时弹出对话框
		viewDetail(id) {
			this.selectedId = id
			this.init(this.propSelectpage)
		},
		//匹配订单生成广告
		tradeClick() {
			let dataInput = {
				poid: this.selectedId,
				fuid: this.$store.state.user.uid,
				count: this.count,
				password: this.password,
				payMethod: this.payMethod,
			}
			vpost(vlink.ddd.createOrder, dataInput).then(re => {
				if (re != null) {
					this.tradeShow = false
					this.msg = re.msg
					this.$emit('action')
					this.count = ''
					this.password = ''
					this.closeMsg()
				}
			})
		},
		//取消广告
		cancelAd() {
			this.adShow = false
			this.title = Lang.tips[this.lang][0]
			this.dqAction = 'cancelAd'
			this.confirm = true
		},
		//取消广告的具体操作
		cancelAdorder() {
			let dataInput = {
				fid: this.$store.state.user.uid,
				orderId: this.selectedId,
			}
			vpost(vlink.ddd.cancelAdver, dataInput).then(re => {
				if (re != null) {
					this.confirm = false
					this.msg = re.msg
					this.$emit('action') //重新刷新数据
					this.closeMsg()
				}
			})
		},
		//完成交易
		completeTran() {
			this.complete = !this.complete
			this.password = ''
			this.isrankm = false
		},
		completeTrans() {
			let dataInput = {
				uid: this.$store.state.user.uid,
				oid: this.selectedId,
				password: this.password,
			}
			if (this.password.length < '2') {
				this.msg = Lang.tips[this.lang][5]
				return
			}
			vpost(vlink.ddd.completeOrder, dataInput).then(re => {
				if (re != null) {
					this.confirm = false
					this.msg = re.msg
					this.$emit('action')
				}
				this.closeMsg()
			})
		},
		//查看对方的交易信息
		lookInf() {
			let dataInput = {
				uid: this.$store.state.user.uid,
				oid: this.selectedId,
			}
			if (this.infShow == false) {
				vpost(vlink.ddd.lookOtherInf, dataInput).then(re => {
					if (re != null) {
						this.phone = re.data.phone
						this.infShow = true
					} else {
						//错误信息
					}
				})
			} else {
				this.infShow = false
			}
		},
		//上传凭证
		uploadVoucher() {
			this.upload = !this.upload
		},
		file_img(antUrl) {
			this.imgFile = antUrl
		},
		uploadVoucherSub() {
			var inputdat = new FormData()
			inputdat.append('filedata1', this.imgFile)
			inputdat.append('oid', this.selectedId)
			imgpost(vlink.ddd.uploadVoucher, inputdat).then(re => {
				if (re != null) {
					this.msg = re.data.msg
				}
				this.closeMsg()
			})
		},
		//订单申诉
		orderComplaint() {
			this.isrankm = !this.isrankm
			this.complete = false
			this.rankm = ''
		},
		orderComplaints() {
			if (this.rankm.length < 1) {
				this.msg = Lang.tips[this.lang][6]
				return
			}
			let dataInput = {
				uid: this.$store.state.user.uid,
				oid: this.selectedId,
				remarks: this.rankm,
			}
			vpost(vlink.ddd.appealOrder, dataInput).then(re => {
				if (re != null) {
					this.msg = re.msg
					this.$emit('action')
				}
				this.closeMsg()
			})
		},
		//取消申诉
		XOrderComplaint() {
			this.orderShow = false
			this.title = Lang.tips[this.lang][3]
			this.dqAction = 'XOrderComplaint'
			this.confirm = true
		},
		XOrderComplaints() {
			let dataInput = {
				uid: this.$store.state.user.uid,
				oid: this.selectedId,
			}
			vpost(vlink.ddd.cancelAppeal, dataInput).then(re => {
				if (re != null) {
					this.confirm = false
					this.msg = re.msg
					this.$emit('action')
				} else {
					this.confirm = false
					this.msg = '出错了'
				}
				this.closeMsg()
			})
		},
		//取消订单
		XOrder() {
			this.orderShow = false
			this.title = Lang.tips[this.lang][4]
			this.dqAction = 'XOrder'
			this.confirm = true
		},
		XOrders() {
			let dataInput = {
				uid: this.$store.state.user.uid,
				oid: this.selectedId,
			}
			vpost(vlink.ddd.cancelOrder, dataInput).then(re => {
				if (re != null) {
					this.confirm = false
					this.msg = re.msg
					this.$emit('action')
				} else {
					this.confirm = false
					this.msg = '出错了-_-'
				}
			})
		},
		//确认弹窗的确定按钮
		confirmOk() {
			if (this.dqAction === 'cancelAd') {
				this.cancelAdorder()
			} else if (this.dqAction === 'completeTran') {
				this.completeTrans()
			} else if (this.dqAction === 'orderComplaint') {
				this.orderComplaints()
			} else if (this.dqAction === 'XOrderComplaint') {
				this.XOrderComplaints()
			} else if (this.dqAction === 'XOrder') {
				this.XOrders()
			}
		},
		//关闭提示框
		closeMsg() {
			setTimeout(() => {
				this.msg = ''
			}, 1300)
		},
		//关闭窗口
		e_en() {
			this.msg = ''
		},
		e_en_1() {
			this.tradeShow = false
		},
		e_en_2() {
			this.adShow = false
		},
		e_en_3() {
			this.orderShow = false
		},
		confirmClose() {
			this.confirm = false
		},
	},
}
</script>

<style scoped>
.radioselect{
	color: #FFF;
}
.finallist {
	color: var(--clr2);
}
.finallist > li {
	text-align: center;
}
li {
	line-height: 40px;
}
li:hover {
	background-color: #262a42;
}
.ddd_dialog {
	width: 100%;
	height: 100%;
	/* position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.3); */
}
.ddd_dialog > ol {
	list-style: none;

	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: 10px;
	/*margin: 10% auto 0;
	 padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 50px;
	padding-right: 20px; */

	/* background: #fff;
	box-shadow: 0 1px 1px 1px #eaeaea; */
	border-radius: 10px;
}
.ddd_dialog > ol > li {
	list-style: none;
	/* padding: 0; */
	margin: 0;
	width: 100%;
	margin-bottom: 10px;
	color: #262a42;
}
.ddd_dialog > ol > li:hover {
	background: #262a42;
	color: #fff;
}
.ddd_dialog > ol > li > label {
	margin-left: 10px;
	font-size: 16px;
	line-height: 36px;
}
.ddd_dialog > ol > li > .rcont {
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
}
.ddd_dialog > ol > li > input.rcont {
	height: 33px;
	padding: 0;
	margin: 0;
	width: 90%;
	margin-left: 11px;
	margin-bottom: 10px;
	border: 1px solid #eaeaea;
	border-radius: 3px;
	text-indent: 3px;
	/* display: block; */
}

.ddd_dialog > ol > li > p.rcont {
	margin: 0;
	font-size: 14px;
	line-height: 30px;
	color: #afb7f5;
	padding-left: 10px;
}

.inf_name {
	display: inline-block;
	width: 15%;
	margin-right: 2%;
}

.button_action {
	border: none;
	width: 100%;
	border-radius: 5px;
	background-color: #606693;
	color: #fff;
	padding: 5px 15px;
	font-size: 16px;
}

.rcont1 {
	height: 33px;
	padding: 0;
	margin: 0;
	width: 79%;
	margin-bottom: 10px;
	border: 1px solid #eaeaea;
	border-radius: 3px;
	text-indent: 3px;
	float: left;
}
.rfm {
	height: 33px;
	width: 20%;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	color: #fff;
	border-radius: 5px;
	background: #606693;
	float: right;
}

.dialogDel {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
}
.delqr {
	width: 320px;
	height: 160px;
	background: #fff;
	margin: 10% auto 0;
	border-radius: 10px;
	overflow: hidden;
}
.delqr > p {
	text-align: center;
	font-size: 16px;
	color: #262a42;
	margin-top: 50px;
}
.lastLi {
	border: none;
	background: #646d96;
	padding: 0;
	margin: 0;
	color: #fff;
	padding: 5px 20px;
	border-radius: 5px;
	margin-top: 10px;
	float: right;
}
.delqr > button {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	color: #fff;
	padding: 5px 20px;
	border-radius: 5px;
	margin-top: 10px;
}
.delqr > .fl {
	background: olive;
	float: left;
	margin-left: 20px;
}
.delqr > .fr {
	background: orangered;
	float: right;
	margin-right: 20px;
}
.uploadImg {
	width: 100%;
	height: 300px;
}


</style>
